<template>
	<div class="container">
		<div class="J-weixin-tip weixin-tip" ref="myWeixinTip">
			<div class="weixin-tip-content" ref="myWeixinTipContent">
				请在浏览器中打开
				<br />以完成支付
			</div>
		</div>
		<div class="J-weixin-tip-img weixin-tip-img"></div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { showToast } from "vant";

const _AP = "";

const myWeixinTipContent = ref(null);
const myWeixinTip = ref(null);
onMounted(() => {
	if (location.hash.indexOf("error") !== -1) {
		showToast("参数错误，请检查");
	} else {
		const ua = navigator.userAgent.toLowerCase();
		const tip = document.querySelector(".weixin-tip");
		const tipImg = document.querySelector(".J-weixin-tip-img");
		if (ua.indexOf("micromessenger") !== -1) {
			tip.style.display = "block";
			tipImg.style.display = "block";
			if (ua.indexOf("iphone") !== -1 || ua.indexOf("ipad") !== -1 || ua.indexOf("ipod") !== -1) {
				tipImg.className = "J-weixin-tip-img weixin-tip-img iphone";
			} else {
				tipImg.className = "J-weixin-tip-img weixin-tip-img android";
			}
		} else {
			const getQueryString = function (url, name) {
				const reg = new RegExp(`(^|\\?|&)${name}=([^&]*)(\\s|&|$)`, "i");
				if (reg.test(url)) return RegExp.$2.replace(/\+/g, " ");
			};
			const param = getQueryString(location.href, "goto") || "";
			location.href = param !== "" ? _AP.decode(param) : "pay.htm#error";
		}
	}
});
</script>

<style lang="scss" scoped>
.container {
	.weixin-tip {
		display: none;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		position: absolute;
		top: 15px;
		right: 20px;
		width: 265px;
		padding: 55px 0 0;
		text-align: left;
		background: url()
			no-repeat right top;
		background-size: 45px 68px;
	}

	.weixin-tip-img {
		display: none;
		padding: 110px 0 0;
	}

	.weixin-tip-img::after {
		display: block;
		margin: 15px auto;
		content: " ";
		background-size: cover;
	}

	.weixin-tip-img.iphone::after {
		width: 150px;
		height: 150px;
		background-image: url();
	}

	.weixin-tip-img.android::after {
		width: 173px;
		height: 240px;
		background-image: url();
	}
}
</style>
